<template>
	<div v-if="isBeyondLine" flex>
		<el-row 
			class="flex-1 overflow-hidden transition-all" 
			:gutter="20"
			:class="isExpand ? 'h-auto' : 'h-32px'"
		>
			<el-col
				v-for="column in searchColumns"
				:span="column.span || colSpan"
				m-b-10px
			>
				<div flex>
					<span
						v-if="column.label"
						flex-none
						line-height-32px
						:style="{width: column.labelWidth || 'auto'}"
					>
						{{ column.label }}
					</span>
					<component
						:is="components[column.element]"
						v-bind="column"
						v-model="searchData[column.prop]"
						@changeSelect="changeSelect"
					>
					</component>
				</div>
			</el-col>
		</el-row>
		<el-button m-l-10px w-30px @click="changeSlide">
			<IEpArrowUp v-if="isExpand"></IEpArrowUp>
			<IEpArrowDown v-else></IEpArrowDown>
		</el-button>
		<div m-l-10px>
			<el-button w-100px type="primary" @click="onSubmit">
				<IEpSearch m-r-6px></IEpSearch>
				查询
			</el-button>
			<el-button w-100px @click="onReset">
				<IEpRefresh m-r-6px></IEpRefresh>
				重置
			</el-button>
		</div>
	</div>
	<div v-else flex>
		<el-row class="flex-1">
			<el-col
				v-for="column in searchColumns"
				:span="column.span || colSpan"
				:offset="column.offset"
			>
				<div flex>
					<span 
						v-if="column.label"
						flex-none
						:style="{width: column.labelWidth || 'auto'}"
					>
						{{ column.label }}
					</span>
					<component
						:is="components[column.element]"
						v-bind="column"
						v-model="searchData[column.prop]"
						@changeSelect="changeSelect"
					>
					</component>
				</div>
			</el-col>
			<div m-l-10px>
				<el-button w-100px type="primary" @click="onSubmit">
					<IEpSearch m-r-6px></IEpSearch>
					查询
				</el-button>
				<el-button w-100px @click="onReset">
					<IEpRefresh m-r-6px></IEpRefresh>
					重置
				</el-button>
			</div>
		</el-row>
	</div>
</template>
<script setup lang="ts">
import {autoImportComponents, autoImportProps} from './index'
import type { PropType } from 'vue';
interface SearchColumnsT {
	label: string,
	element: string,
	prop: string,
	style: any
}
const props = defineProps({
	searchColumns: {
		type: Array as PropType<SearchColumnsT[]>,
		default: () => []
	},
	searchData: {
		type: Object,
		default: () => {}
	}
})
const colSpan = 6

//自动引入对应组件和Props
const components = autoImportComponents()
autoImportProps(props)

//计算布局是否超出一行
const isBeyondLine = computed(()=> {
	let num = 0
	for(var i = 0; i < props.searchColumns.length; i++) {
		let span = props.searchColumns[i].span || colSpan
		num += span
		console.log(num, 88);
	}
	return num >= 24
})
const onReset = ()=> {
	for(const i in props.searchData) {
		props.searchData[i] = ''
	}
}
const onSubmit = ()=> {
	console.log(props.searchData, '搜索栏数据');
}

const isExpand = ref(false)
const changeSlide = function() {
	isExpand.value = !isExpand.value
}

const changeSelect = (obj:any) => {
	obj.selectOptions.modelValue = obj.val
	props.searchData[obj.selectOptions.prop] = obj.val
}

</script>

<style>

</style>